<template>
	<view class="vip-master-view">
		<view class="start"></view>
		<view class="clip-me"></view>
		<view class="vip-component">
			<view class="top-nav">
				<van-icon name="arrow-left" color="#081A2A" size="18" class="nav-back-icon" @click="goback" />
				<view class="title" style="display: none;">去抽奖</view>
			</view>
			<view class="main">
				<view class="rule-msg">
					<view class="title"> 规则： </view>
					<view class="des"> 每邀请一人注册积1分，绑定积2分，充值一个月积10分， 半年积45分，一年积90分</view>
				</view>
				<view class="game">
					<view class="integral">我的积分:<view class="num"> {{ myVipRewardData.rewardPoints }}</view> 分</view>
					<view class="game-container">
						<template v-for="(prizeItem, i) in prize" :key="i">
							<view class="grid-item center" v-if="i === 4" @click="cash">
								<view class="run">
									<view class="name">立即抽奖</view>
									<view class="run-tips">10积分1次</view>
								</view>
							</view>
							<view v-else class="grid-item">
								<view class="vip-reward active" v-if="i === state.cycle && startGame">
									<image src="/static/images/vip/vip_active.png" style="width: 67px; height: 22px;">
									</image>
									<view class="multiple"> x {{ prizeItem.rewardDay}}</view>
									<view class="prizeName">{{ prizeItem.prizeName}} </view>
								</view>
								<view class="vip-reward" v-else>
									<image src="/static/images/vip/vip.png" style="width: 67px; height: 22px;"></image>
									<view class="multiple"> x {{ prizeItem.rewardDay}}</view>
									<view class="prizeName">{{ prizeItem.prizeName}} </view>
								</view>
							</view>
						</template>
					</view>
				</view>

				<view class="rules">
					<MyWinningRecord title="我的中奖记录" :data="myRewardDetailsData" />
					<view class="more-action">
						<view class="more-tips">最多展示一个月内20条记录</view>
						<view class="action" @click="loadMoreData" v-if="showMoreAction">更多记录 </view>
					</view>
				</view>
			</view>
		</view>
		<GlobalWebsocketNotice />
		<Cannot v-if="lotteryAllowed" :visible="lotteryAllowed" :count="myVipRewardData.rewardPoints" @jump="onGotoPage" @close="onCloseCannot"/>
		<Win v-if="isWin" :visible="isWin" :count="prizeName" @jump="toRewards" @close="onCloseWin" />
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted, computed } from 'vue'
	import { onLoad, onShow, } from "@dcloudio/uni-app"
	import MyWinningRecord from "@/components/MyWinningRecord/index.vue"
	import GlobalWebsocketNotice from '@/components/globalWebsocketNotice/index.vue'
	import Cannot from "@/components/pointsLotteryModal/cannot.vue"
	import Win from "@/components/pointsLotteryModal/win.vue"

	import { vipServer } from "@/common/index";
	import { useVipStore } from "@/stores/useVip.js"
	import { useLotteryHooks } from "@/hooks/index"
	import { useBound } from "@/hooks/useBound.ts"

	const { startMove, state, resetIndex } = useLotteryHooks.useLottery()
	const { tipBoundStudent, studentIsEmpt } = useBound();
	console.log('state', state)
	const vipStore = useVipStore();

	const lotteryAllowed = ref(false); // true： 弹出这个不可以抽奖的提示弹窗 false: 不需要弹出，积分足够可以抽奖
	const onGotoPage = () => {
		uni.switchTab({
			url: "/pages/tabbar/vip/index"
		})
	}
	const onCloseCannot = () => {
		lotteryAllowed.value = false
	}
	
	const startGame = ref(false)
	const LotteryInProgress = ref(false); // false： 抽奖还没开始 true： 抽奖在进行中，此时不能再次去抽奖，只能等抽奖结束
	
	const isWin = ref(false)
	const prizeName = ref("")
	const toRewards = () => {
		if (studentIsEmpt.value) {
			tipBoundStudent();
			return;
		}
		uni.navigateTo({
			url: '/pagesD/jackpot/index'
		})
		prizeName.value = ""
		startGame.value = false //  false: 抽奖抽中高亮的不显示 true： 显示
		resetIndex()
	}
	const onCloseWin = () => {
		isWin.value = false
		prizeName.value = ""
		LotteryInProgress.value = false // 抽奖已经结束了，又可以开始抽奖了
		console.log("是否重置了数据", LotteryInProgress.value)
	}
	const setShowWin = (val) => {
		prizeName.value = val
		isWin.value = true
	}



	// 我的奖池
	const myVipRewardData = ref({});
	// 获取奖品列表
	const myVipReward = async () => {
		try {
			const { data, status } = await vipServer.myVipReward()
			if (status === '200') {
				myVipRewardData.value = data
			}
		} catch (e) {
			console.log(e)
			//TODO handle the exception
		}
	}


	// 我的中奖记录
	const MAX = 4
	const myRewardDetailsData = ref([])
	const allMyRewardDetailsData = ref([])
	const showMoreAction = computed(() => {
		return myRewardDetailsData.value.length <= MAX && allMyRewardDetailsData.value.length > myRewardDetailsData.value.length
	})
	const loadMoreData = () => {
		if (myRewardDetailsData.value.length <= MAX) {
			myRewardDetailsData.value = allMyRewardDetailsData.value
		}
	}
	const myRewardDetails = async () => {
		try {
			const { data, status } = await vipServer.myRewardDetails()
			console.log('1------>', data, status)
			if (status === "200") {
				if (Array.isArray(data)) {
					if (data.length > MAX) {
						allMyRewardDetailsData.value = data;
						const restrictedData = [];
						for (let i = 0; i < data.length; i++) {
							if (i < MAX) {
								restrictedData.push(data[i])
							} else {
								break
							}
						}
						myRewardDetailsData.value = restrictedData
					} else {
						allMyRewardDetailsData.value = data;
						myRewardDetailsData.value = data
					}
				} else {
					allMyRewardDetailsData.value = [];
					myRewardDetailsData.value = []
				}
			}
		} catch (e) {
			console.log(e)
			//TODO handle the exception
		}
	}

	const prize = ref([]); // 奖品列表
	// 索引为第四个位置的控制，防止开始抽奖按钮
	const sortPrize = ({ arr, insertIndex = 3 }) => {
		let newARR = [];
		let newVal = ""
		arr.forEach((item, i) => {
			if (i === insertIndex) {
				newARR.push(item)
				newARR.push(newVal)
			} else {
				newARR.push(item)
			}
		})
		return newARR
	}
	// 获取奖品列表
	const prizeList = async () => {
		try {
			const { data, status } = await vipServer.prizeList()
			if (status === "200" || status === "400") {
				prize.value = sortPrize({ arr: data })
				console.log("prize.value", prize.value)
			}
		} catch (e) {
			console.log(e)
			//TODO handle the exception
		}
	}

	onShow(() => {
		myVipReward()
	})

	onMounted(() => {
		myRewardDetails()
		// lotteryDraw()
		prizeList()
		myVipReward()
	})

	const goback = () => {
		uni.switchTab({
			url: "/pages/tabbar/vip/index"
		})
	}
	const jumpPage = () => {
		uni.navigateTo({
			url: "/pagesD/raffle/index"
		})
	}
	
	const cash = async () => {
		const MIN = 10; // 要抽奖积分不能低于10
		console.log('myVipRewardData.value', myVipRewardData.value, myVipRewardData.value.rewardPoints)
		if (myVipRewardData.value.rewardPoints < MIN) {
			// uni.showToast({
			// 	title:"抱歉！您的积分不足10,无法参与抽奖",
			// 	icon:"none"
			// })
			lotteryAllowed.value = true
			return;
		}
		if (LotteryInProgress.value) {
			console.log("此时正在抽奖，等抽奖完成，才可进行再次抽奖")
			uni.showToast({
				title: '此时正在抽奖，等抽奖完成，才可进行再次抽奖',
				duration: 2000,
				icon: "none"
			})
			return
		}
		LotteryInProgress.value = true

		try {
			const { data, status, message } = await vipServer.lotteryDraw() // 立即抽奖 接口
			if (status === '200') {
				console.log("抽中", data.rewardDay)
				startGame.value = true
				startMove(data.rewardDay, () => {
					vipStore.setLotteryDraw(data)
					myRewardDetails()
					myVipReward()
					setShowWin(data.rewardDay)
					// uni.showModal({
					// 	title: "兑奖",
					// 	content: `恭喜您获得 ${data.prizeName}`,
					// 	cancelText: "取消",
					// 	confirmText: "去兑奖",
					// 	success(porps) {
					// 		const { cancel, confirm } = porps;
					// 		if (confirm) {
					// 			if (studentIsEmpt.value) {
					// 				tipBoundStudent();
					// 				return;
					// 			}
					// 			uni.navigateTo({
					// 				url: '/pagesD/rewards/index'
					// 			})
					// 			startGame.value = false //  false: 抽奖抽中高亮的不显示 true： 显示
					// 			resetIndex()
					// 		}
					// 	},
					// 	complete() {
					// 		LotteryInProgress.value = false // 抽奖已经结束了，又可以开始抽奖了
					// 	}
					// })
				})
			} else {
				uni.showToast({
					icon: "none",
					title: message || '抽奖失败',
					complete() {
						LotteryInProgress.value = false
					}
				})
			}
		} catch (e) {
			LotteryInProgress.value = false
			console.log(e)
			//TODO handle the exception
		}

	}
</script>
<style>
	page {
		background-color: #eff8fd;
	}
</style>
<style lang="scss" scoped>
	.top-nav {
		width: 100%;
		height: 60upx;
		padding-top: 100upx;
		text-align: center;
		position: fixed;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		line-height: 60upx;

		// background-color: #ccc;
		.nav-back-icon {
			position: absolute;
			left: 20upx;
			z-index: 2;
		}

		.title {
			color: #081A2A;
			font-weight: 600;
			font-size: 36upx;
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
	}
</style>
<style lang="scss">
	.vip-master-view {
		background-size: cover;
		background-position: center;
		min-width: 100vw;
		min-height: 100vh;
		position: relative;

		// display: flex;
		// justify-content: center;
		// align-items: center;
		.start {
			position: absolute;
			z-index: 1;
			top: 180upx;
			right: 0;
			// transform: rotate(150deg);
			left: 0;
			margin: 0 auto;
			// width: 78px;
			height: 101px;
			// background-image: url('/static/images/vip/blur_start.png'); 
			background: url("/static/images/vip/raffle.png") center center no-repeat;
		}




	}
</style>
<style lang="scss">
	.vip-component {
		position: absolute;
		background-color: red;
		min-width: 100vw;
		min-height: 100vh;
		background: rgba(255, 255, 255, 0.3);
		/* 半透明的白色背景 */
		// border-radius: 15px;
		// padding: 20px;
		text-align: center;
		backdrop-filter: blur(10px);
		/* 应用模糊效果 */
		-webkit-backdrop-filter: blur(10px);
		/* 兼容 Webkit 内核的浏览器 */
		// box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */

		.main {
			position: absolute;
			top: 320upx;
			padding: 0 20upx;
			width: calc(100% - 40upx);

			.rule-msg {
				margin: 80upx 0 60upx 0;

				.title {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 28upx;
					line-height: 30upx;
					color: #081A2A;
					line-height: 32upx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.des {
					font-family: PingFang SC, PingFang SC;
					font-size: 28upx;
					line-height: 40upx;
					color: #081A2A;
					line-height: 46upx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
			}


		}

	}
</style>


<style scoped lang="scss">
	.reward-time {
		position: relative;
		z-index: 4;

		.time {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 362upx;
			height: 72upx;
			font-weight: 600;
			font-size: 28upx;
			color: #081A2A;
			line-height: 40upx;
			text-align: center;
			font-style: normal;
			text-transform: none;
			border-top-left-radius: 30upx;
			border-top-right-radius: 30upx;
			background-color: rgba(255, 255, 255, .8);
			backdrop-filter: blur(10px);
			/* 应用模糊效果 */
		}

		.reward-time-content {
			background-color: rgba(255, 255, 255, .8);
			backdrop-filter: blur(10px);
			/* 应用模糊效果 */
			border-bottom-left-radius: 30upx;
			border-bottom-right-radius: 30upx;
			padding-bottom: 16upx;

			.day-num {
				display: flex;
				justify-content: flex-start;
				padding: 30upx 34upx;
				border-bottom: 1px solid #F5F6F6;

				.day-layout-flex {
					flex-grow: 1;
					flex-basis: 0;
					display: flex;
					flex-direction: column;

					.d-title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: #999999;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.num {
						font-family: DIN Pro, DIN Pro;
						font-weight: bold;
						font-size: 32upx;
						color: #081A2A;
						line-height: 60upx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
				}
			}

			.sum {
				padding: 30upx 34upx;

				.sum-item {
					display: flex;
					justify-content: space-between;
					align-content: center;

					.sum-item-title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 24upx;
						color: #081A2A;
						line-height: 46upx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.sum-item-num {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24upx;
						color: #2BC888;
						line-height: 46upx;
						text-align: right;
						font-style: normal;
						text-transform: none;
					}
				}

			}

			.flooter {
				width: 670upx;
				height: 108upx;
				background: #2BC888;
				border-radius: 54upx;
				display: flex;
				justify-content: center;
				align-content: center;
				margin-bottom: 30upx;
				margin-top: 30upx;
				line-height: 108upx;

				.img {
					width: 32px;
					height: 32px;
					margin-top: 23upx;
				}

				.txt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 32upx;
					color: #FFFFFF;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}
		}

	}


	.raffle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		border-radius: 12upx;
		height: 140upx;
		margin: 20upx auto;

		.title {
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-content: flex-start;
			margin-left: 60upx;

			.img {
				width: 63px;
				height: 15px;
			}

			.integral {
				margin-top: 10upx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24upx;
				color: #141414;
				line-height: 28upx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.integral-num {
					color: #FF6363;
				}
			}
		}

		.go-raffle {
			margin-right: 28upx;
			width: 146upx;
			height: 62upx;
			line-height: 62upx;
			background: #F04542;
			border-radius: 31upx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28upx;
			color: #FFFFFF;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}

	.rules {
		background: #FFFFFF;
		padding: 10upx;
		border-radius: 12upx;
		width: 100%;

		.more-action {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-content: center;
			margin: 24upx auto;

			.more-tips {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24upx;
				color: #999999;
				line-height: 28upx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.action {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28upx;
				color: #2BC888;
				line-height: 32px;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}
</style>

<style lang="scss" scoped>
	.game {
		background: linear-gradient(180deg, #E1FFF3 0%, #D1FFEF 100%);
		border-radius: 24upx;
		border: 4upx solid #FFFFFF;
		padding: 20upx 10upx;

		.integral {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 46upx 0;
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 28upx;
			color: #000000;
			line-height: 32upx;
			text-align: center;
			font-style: normal;
			text-transform: none;

			.num {
				color: #F7AD55;
				font-weight: bold;
				font-size: 40upx;
				margin: 0 10upx;
			}
		}

		.game-container {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-rows: repeat(3, 232upx);
			/* 每个方块高度为200px */
			gap: 20upx;

			/* 设置列之间的间隔 */
			.grid-item {
				background: linear-gradient(180deg, #FFFFFF 0%, #E7FFF5 100%);
				border-radius: 12upx;
				border: 2upx solid #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
			}

			.vip-reward {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.multiple {
					margin: 20upx 0 40upx 0;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 130upx;
					height: 50upx;
					background: linear-gradient(180deg, #E7A543 0%, #DFBD43 100%);
					border-radius: 160upx;
					border: 1px solid #F3C54E;
					color: #FFFFFF;
					font-size: 30upx;
				}

				.prizeName {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24upx;
					color: #081A2A;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}

			.active {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;

				// background: linear-gradient(180deg, #FFFFFF 0%, #E7FFF5 100%);
				// background-color: rgba(231, 255, 245, 1);
				// box-shadow: #26D18C 0upx 0upx 10upx;
				.multiple {
					background: linear-gradient(180deg, #E74643 0%, #DF7B43 100%);
					border: 1px solid #F36A4E;
				}
			}

			.center {
				background: linear-gradient(135deg, #45E7A5 0%, #2CD892 50%, #45E7A5 100%);
				box-shadow: inset 0upx 0upx 12upx 0px #9EFFD7;
				border-radius: 12upx;
				border: 2upx solid #26D18C;

				.run {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.name {

						font-family: PingFang SC, PingFang SC;
						font-weight: 600;
						font-size: 40upx;
						color: #FFFFFF;
						line-height: 40upx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}

					.run-tips {
						margin-top: 20upx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24upx;
						color: #FFFFFF;
						line-height: 24upx;
						text-align: center;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}
	}


	.rules {
		background: #FFFFFF;
		padding: 10upx;
		border-radius: 12upx;
		width: 100%;

		.more-action {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-content: center;
			margin: 24upx auto;

			.more-tips {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24upx;
				color: #999999;
				line-height: 28upx;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}

			.action {
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28upx;
				color: #2BC888;
				line-height: 32px;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
	}
</style>